<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一步： 引入ztree的css与js-->
    <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
</head>
<body>
    <!--第二步： 预留一个ul标签用于展示树-->
    <ul id="treeDemo" class="ztree"></ul>
</body>

<script>
    // <!--第三步:把数据与页面的ul整合到一起形成一棵树-->

    // <!-- 3.1定义一个全局参数-->
    var setting = {
        check: {
            enable: true    //是不是要展示复选框
        },
        data: {
            simpleData: {
                enable: true  //是否把数据展出树形结构
            }
        }
    };

    // <!--3.2 定义树所需要数据-->
    var zNodes =[
        { id:1, pId:0, name:"saas管理", open:true},
        { id:11, pId:1, name:"企业管理"},
        { id:111, pId:1, name:"模块管理"}
    ];

    // <!--3.3 把数据与全局参数、页面ul标签整合形成一棵树-->
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

</script>

</html>